<template>
	<div class="uiue-card" style="padding-bottom: 0; margin-top: 0">
		<div class="tit">{{ title }}</div>
		<div class="content">
			<div>NO：{{ no || '--' }}</div>
			<div>
				发起人：<span class="content-name" v-if="currentName">
					{{ promoter }}
				</span>
				<span v-else>{{ userInfo.name }}</span>
			</div>
			<div v-if="currentName">当前环节：{{ currentName }}</div>
			<div v-if="currentName">
				当前处理人：<span class="content-name">{{ userInfo.name }}</span>
			</div>
		</div>

		<a-tabs v-model:active="active" class="tabss" @change="handleChange">
			<a-tab-pane v-for="v in tabData" :key="v.key" :tab="v.txt"></a-tab-pane>
		</a-tabs>
	</div>
</template>

<script setup name="TopCard">
import tool from '@/utils/tool'
import { useRoute } from 'vue-router'
const route = useRoute()
const { processInstanceId } = route.query
const userInfo = ref(tool.data.get('USER_INFO'))
const emit = defineEmits(['update:activeKey'])
const props = defineProps({
	activeKey: {
		type: String
	},
	title: {
		type: String
	}
})
const config = [
	{ txt: '门户Html5', key: '1', type: 'pcPropertiesList' },
	{ txt: '移动端Html5', key: '2', type: 'appPropertiesList' },
	{ txt: 'Android', key: '3', type: 'androidPropertiesList' },
	{ txt: 'IOS', key: '4', type: 'iosPropertiesList' },
	{ txt: '移动端UMAP', key: '5', type: 'umapPropertiesList' }
]
// 发起人
const promoter = ref(tool.session.get('promoter'))
// 当前环节名称
const currentName = inject('currentName')
// 获取详情数据
const datas = inject('detailDate') || inject('editDate')
const no = processInstanceId

// 是否是双端
const isTwo = datas.value.appAccess.includes(',')

// 应用类型
const appinfoType = isTwo ? '双端' : config.find((v) => v.key == datas.value.appAccess).txt
// 版本号
const version = computed(() => {
	let num = ''
	if (!isTwo) {
		if (datas.value.appAccess != '1') {
			let obj = config.find((v) => v.key == datas.value.appAccess)['type']
			num = datas.value[obj].map((s) => s.appVersion).join()
			// num = datas.value[obj][0].appVersion
		}
	}
	return num
})
// 审批类型
const approvalType = computed(() => {
	let str = ''
	switch (tool.session.get('approvalType')) {
		case '0':
			str = '下架'
			break
		case '1':
			str = '新增'
			break
		case '2':
			str = '编辑'
			break
		case '3':
			str = '升级'
			break
		default:
			break
	}
	return str
})

// 标题 = 应用类型 + 应用名称 + 版本号 + 审批类型
// const title = ref(`${appinfoType}${datas.value.appName}${version.value}应用${approvalType.value}申请`)

// 最上面tab
const tabData = ref([])
const active = ref('1')

const tabDataHandle = () => {
	const doneStatus = route.query.doneStatus
	if (doneStatus) {
		tabData.value = [
			{ txt: '详细信息', key: '1' },
			{ txt: '流程历史', key: '2' },
			{ txt: '流程图', key: '3' }
		]
	} else {
		tabData.value = [{ txt: '详细信息', key: '1' }]
	}
}
onMounted(() => {
	tabDataHandle()
})

const handleChange = (i) => {
	emit('update:activeKey', i)
}
</script>

<style lang="less" scoped>
.content {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	font-size: 14px;
	margin-top: 8px;
	color: rgb(89, 89, 89);

	div {
		margin-left: 16px;
	}

	&-name {
		color: rgb(50, 110, 255);
	}
}

.content :first-child {
	margin-left: 0;
}
</style>
<style>
.tabss .ant-tabs-nav {
	margin: 0;
}
</style>
